<template>
    <div class="screen-right">
        <div class="screen-right-item">
            <div class="right-item-up">
                <div class="item-up-left">
                    <div class="item-content">
                        <div class="title">产值收入（万元）</div>
                        <div class="value">
                            <span class="digit">0</span>
                            <span class="digit">0</span>
                            <span class="digit">3</span>
                            <span class="digit">8</span>
                            <span class="digit">7</span>
                            <span class="digit">7</span>
                            <span class="digit">0</span>
                            <span class="digit">0</span>
                        </div>
                        <div class="details">
                            <div class="detail-item">
                                <div class="detail-label">人次（万人）</div>
                                <div class="detail-value">20</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">客单价（元）</div>
                                <div class="detail-value">269</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item-up-right">
                    <div class="right-title">短剧视频</div>
                    <div class="right-img">
                        <img src="@/assets/icon/video.png" alt="">
                    </div>
                </div>
            </div>
            <div class="right-item-down">
                <div class="item-down-main">
                    <div class="item-down-title">播放量人次占比</div>
                    <div ref="playCountChart" class="play-count-chart"></div>
                </div>
            </div>
        </div>
        <div class="screen-right-item">
            <div class="right-item-up">
                <div class="item-up-left">
                    <div class="item-content">
                        <div class="title">产值收入（万元）</div>
                        <div class="value">
                            <span class="digit">0</span>
                            <span class="digit">0</span>
                            <span class="digit">3</span>
                            <span class="digit">8</span>
                            <span class="digit">7</span>
                            <span class="digit">7</span>
                            <span class="digit">0</span>
                            <span class="digit">0</span>
                        </div>
                        <div class="details">
                            <div class="detail-item">
                                <div class="detail-label">法人(家)</div>
                                <div class="detail-value">1192</div>
                            </div>
                            <div class="detail-item">
                                <div class="detail-label">客单价（元）</div>
                                <div class="detail-value">19.5</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item-up-right">
                    <div class="right-title">数字文创</div>
                    <div class="right-img">
                        <img src="@/assets/icon/tw.png" alt="">
                    </div>
                </div>
            </div>
            <div class="right-item-down">
                <div class="item-down-left">
                    <div class="item-down-title">购物游客类型占比</div>
                    <div ref="shoppingTypeChart" class="item-down-content"></div>
                </div>
                <div class="item-down-right">
                    <span class="item-down-title">购物游客年龄占比</span>
                    <div ref="shoppingAgeChart" class="item-down-content"></div>
                </div>
            </div>
        </div>
        <div class="screen-right-item small-right">
            <div class="small-right-left">
                <div class="item-content">
                    <div class="title">GDP（万元）</div>
                    <div class="value" style="margin-top:1.5vh">
                        <span class="digit">0</span>
                        <span class="digit">0</span>
                        <span class="digit">3</span>
                        <span class="digit">8</span>
                        <span class="digit">7</span>
                        <span class="digit">7</span>
                        <span class="digit">0</span>
                        <span class="digit">0</span>
                    </div>
                    <div class="details">
                        <div class="detail-item">
                            <div class="detail-label">规上企业（家）</div>
                            <div class="detail-value">20</div>
                        </div>
                        <div class="detail-item">
                            <div class="detail-label">数字经济比例</div>
                            <div class="detail-value">38.22%</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="small-right-right">
                <div class="item-up-left">
                    <div class="left-title">产</div>
                    <div class="left-img">
                        <img src="@/assets/icon/cy.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import * as echarts from 'echarts';

const shoppingTypeChart = ref(null);
const shoppingAgeChart = ref(null);
const playCountChart = ref(null);

let shoppingTypeInstance
let shoppingAgeInstance
let playCountInstance



onMounted(() => {
    initCharts();
    window.addEventListener('resize', handleResize);
});

onBeforeUnmount(() => {
    window.removeEventListener('resize', handleResize);
    if (shoppingTypeInstance) {
        shoppingTypeInstance.dispose();
    }
    if (shoppingAgeInstance) {
        shoppingAgeInstance.dispose();
    }
    if (playCountInstance) {
        playCountInstance.dispose();
    }
});

const handleResize = () => {
    shoppingTypeInstance?.resize();
    shoppingAgeInstance?.resize();
    playCountInstance?.resize();
};

const initCharts = () => {
    initShoppingTypeChart();
    initShoppingAgeChart();
    initPlayCountChart();
};

const initShoppingAgeChart = () => {
    if (shoppingAgeChart.value) {
        shoppingAgeInstance = echarts.init(shoppingAgeChart.value);
        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: '0%',
                top: 'center',
                textStyle: {
                    color: 'white',
                    fontSize: 10
                },
                itemWidth: 8,
                itemHeight: 8,
                icon: 'circle'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    center: ['25%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 368, name: '18岁以下', itemStyle: { color: '#FFD93D' } },
                        { value: 267, name: '18-35岁', itemStyle: { color: '#6BCF7F' } },
                        { value: 189, name: '35-50岁', itemStyle: { color: '#4D96FF' } },
                        { value: 123, name: '50-70岁', itemStyle: { color: '#9B59B6' } },
                        { value: 94, name: '70岁以上', itemStyle: { color: '#FF8A65' } }
                    ]
                }
            ]
        };
        shoppingAgeInstance.setOption(option);
    }
};

const initShoppingTypeChart = () => {
    if (shoppingTypeChart.value) {
        shoppingTypeInstance = echarts.init(shoppingTypeChart.value);
        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: '0%',
                top: 'center',
                textStyle: {
                    color: 'white',
                    fontSize: 10
                },
                itemWidth: 10,
                itemHeight: 10,
                icon: 'circle'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '60%'],
                    center: ['25%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1048, name: '跟团游', itemStyle: { color: '#00D4FF' } },
                        { value: 735, name: '自由行', itemStyle: { color: '#FF6B6B' } },
                        { value: 580, name: '商务差旅', itemStyle: { color: '#4ECDC4' } },
                    ]
                }
            ]
        };
        shoppingTypeInstance.setOption(option);
    }
};

const initPlayCountChart = () => {
    if (playCountChart.value) {
        playCountInstance = echarts.init(playCountChart.value);
        const option = {
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                right: '10%',
                top: 'center',
                textStyle: {
                    color: 'white',
                    fontSize: 12
                },
                itemWidth: 10,
                itemHeight: 10,
                icon: 'circle',
                formatter: function (name) {
                    const data = [
                        { name: '历史', value: 1520 },
                        { name: '都市', value: 2340 },
                        { name: '奇幻', value: 1890 },
                        { name: '旅游', value: 1260 }
                    ];
                    const total = data.reduce((sum, item) => sum + item.value, 0);
                    const item = data.find(d => d.name === name);
                    const percent = ((item.value / total) * 100).toFixed(1);
                    return `${name} ${percent}% ${item.value}人`;
                }
            },
            series: [
                {
                    name: '播放量占比',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    center: ['20%', '50%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: [
                        { value: 1520, name: '历史', itemStyle: { color: '#FF9500' } },
                        { value: 2340, name: '都市', itemStyle: { color: '#00C9FF' } },
                        { value: 1890, name: '奇幻', itemStyle: { color: '#FF6B9D' } },
                        { value: 1260, name: '旅游', itemStyle: { color: '#C9DD22' } },
                    ]
                }
            ]
        };
        playCountInstance.setOption(option);
    }
};

// onMounted(() => {

// });

// onBeforeUnmount(() => {
//     window.removeEventListener('resize', resizeTypeChart);
//     if (typeChart) {
//         typeChart.dispose();
//     }
// });
</script>
<style scoped lang="scss">
/* 右侧可视化组件样式 */
.screen-right {
    position: absolute;
    right: 1.04vw; // 20px
    top: 9.26vh; // 100px
    width: 20vw; // 360px
    height: calc(100vh - 12.96vh); // 140px
    z-index: 100;
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .screen-right-item {
        width: 100%;
        height: 40%;
        background: rgba(0, 20, 40, 0.8);
        backdrop-filter: blur(0.52vw); // 10px
        -webkit-backdrop-filter: blur(0.52vw); // 10px
        border: 0.05vw solid rgba(0, 174, 255, 0.3); // 1px
        border-radius: 0.42vw; // 8px
        box-shadow: 0 0.21vw 0.625vw rgba(0, 0, 0, 0.3); // 0 4px 12px
        position: relative;
        padding: 2%;
        box-sizing: border-box;

        .right-item-up {
            width: 100%;
            height: 50%;
            display: flex;

            .item-up-left {
                width: 70%;
                height: 100%;

                .item-content {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 90%;
                }

                .title-bar {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                }

                .title {
                    font-size: calc(12px + 0.2vw);
                    font-weight: bold;
                    color: #a2d2ff;
                }

                .more {
                    font-size: calc(10px + 0.1vw);
                    color: #a2d2ff;
                    cursor: pointer;
                }

                .value {
                    font-size: calc(14px + 0.2vw);
                    font-weight: bold;
                    color: #fff;
                    text-shadow: 0 0 8px rgba(0, 174, 255, 0.5);
                    display: flex;
                }

                .digit {
                    display: inline-block;
                    padding: 0.1vh 0.20vw; // 2px 5px
                    margin: 0 0.1vw; // 0 2px
                    background: rgba(255, 255, 255, 0.1);
                    backdrop-filter: blur(5px);
                    -webkit-backdrop-filter: blur(5px);
                    border: 1px solid rgba(255, 255, 255, 0.2);
                    border-radius: 0.21vw; // 4px
                    box-shadow: 0 0.1vh 0.26vw rgba(0, 0, 0, 0.1); // 0 2px 5px
                    color: #fff;
                    text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
                }

                .details {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    width: 100%;
                    align-items: center;
                }

                .detail-item {
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    position: relative;
                }

                .detail-item:not(:last-child)::after {
                    content: "";
                    position: absolute;
                    right: 0;
                    top: 15%;
                    bottom: 15%;
                    width: 1px;
                    background: rgba(0, 174, 255, 0.3);
                }

                .detail-label {
                    font-size: calc(8px + 0.1vw);
                    color: #a2d2ff;
                }

                .detail-value {
                    font-size: calc(12px + 0.2vw);
                    font-weight: bold;
                    color: #fff;
                    margin-top: 5px;
                }
            }

            .item-up-right {
                width: 30%;
                height: 100%;
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 5px;
                box-sizing: border-box;

                .right-title {
                    color: #fff;
                    width: 100%;
                    text-align: center;
                    background: linear-gradient(to right, blue, cyan);
                }

                .right-img {
                    width: 60%;
                    flex-grow: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
            }
        }

        .right-item-down {
            width: 100%;
            height: 49%;
            display: flex;
            justify-content: space-between;
            margin-top: 0.5vh;

            .item-down-left {
                width: 49%;
                height: 100%;
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 5px;
                box-sizing: border-box;

                .item-down-title {
                    text-shadow: 0 0 8px rgba(0, 174, 255, 0.5);
                    display: flex;
                    color: #00FFFF;
                    font-size: calc(10px + 0.2vw);
                    font-weight: bold;
                    margin-top: 0.2vh;
                }

                .item-down-content {
                    width: 100%;
                    height: 80%;
                }
            }

            .item-down-right {
                width: 49%;
                height: 100%;
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 5px;
                box-sizing: border-box;

                .item-down-title {
                    text-shadow: 0 0 8px rgba(0, 174, 255, 0.5);
                    display: flex;
                    color: #00FFFF;
                    font-size: calc(10px + 0.2vw);
                    font-weight: bold;
                    margin-top: 0.2vh;
                }

                .item-down-content {
                    width: 100%;
                    height: 100%;
                    margin-bottom: -10px;
                }
            }

            .item-down-main {
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                // display: flex;
                // flex-direction: column;
                // align-items: center;
                padding: 5px;
                box-sizing: border-box;

                .item-down-title {
                    text-shadow: 0 0 8px rgba(0, 174, 255, 0.5);
                    display: flex;
                    color: #00FFFF;
                    font-size: calc(10px + 0.2vw);
                    font-weight: bold;
                    margin-top: 0.2vh;
                }

                .play-count-chart {
                    width: 100%;
                    height: 85%;
                }
            }
        }
    }

    .screen-right-item:last-child {
        height: 18.5%;
    }

    .small-right {
        display: flex;

        .small-right-left {
            width: 70%;
            height: 100%;

            .item-content {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                height: 90%;
            }

            .title-bar {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .title {
                font-size: calc(12px + 0.2vw);
                font-weight: bold;
                color: #a2d2ff;
            }

            .more {
                font-size: calc(10px + 0.1vw);
                color: #a2d2ff;
                cursor: pointer;
            }

            .value {
                font-size: calc(14px + 0.2vw);
                font-weight: bold;
                color: #fff;
                text-shadow: 0 0 8px rgba(0, 174, 255, 0.5);
                display: flex;
            }

            .digit {
                display: inline-block;
                padding: 0.1vh 0.20vw; // 2px 5px
                margin: 0 0.1vw; // 0 2px
                background: rgba(255, 255, 255, 0.1);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.2);
                border-radius: 0.21vw; // 4px
                box-shadow: 0 0.1vh 0.26vw rgba(0, 0, 0, 0.1); // 0 2px 5px
                color: #fff;
                text-shadow: 0 0 0.42vw rgba(255, 255, 255, 0.8); // 8px
            }

            .details {
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                width: 100%;
                align-items: center;
                height: 100%;
                margin-top: 1vh;
            }

            .detail-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                text-align: center;
                position: relative;
                height: 100%;

                .detailCharts {
                    width: 100%;
                    height: 100%;
                    background-color: red;
                }
            }

            .detail-item:not(:last-child)::after {
                content: "";
                position: absolute;
                right: 0;
                top: 15%;
                bottom: 15%;
                width: 1px;
                background: rgba(0, 174, 255, 0.3);
            }

            .detail-label {
                font-size: calc(8px + 0.1vw);
                color: #a2d2ff;
            }

            .detail-value {
                font-size: calc(12px + 0.2vw);
                font-weight: bold;
                color: #fff;
                margin-top: 5px;
            }
        }

        .small-right-right {
            width: 30%;
            height: 100%;

            .item-up-left {
                width: 100%;
                height: 100%;
                background: rgba(255, 255, 255, 0.05);
                backdrop-filter: blur(5px);
                -webkit-backdrop-filter: blur(5px);
                border: 1px solid rgba(255, 255, 255, 0.1);
                border-radius: 8px;
                display: flex;
                flex-direction: column;
                align-items: center;
                padding: 5px;
                box-sizing: border-box;

                .left-title {
                    color: #fff;
                    width: 100%;
                    text-align: center;
                    background: linear-gradient(to right, blue, cyan);
                }

                .left-img {
                    width: 60%;
                    flex-grow: 1;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: contain;
                    }
                }
            }
        }
    }

}
</style>